<template>
	<view>
		<u-card :title="title1" :box-shadow="ying" class="bian">
			<view slot="body">
				<!-- #ifdef MP-WEIXIN -->
				<live-player id="livePlayer1" class="live-player" catchtouchmove :src="sourceUrl1" autoplay background-mute
				 sound-mode="speaker" mode='RTC' @statechange="statechange" @click="handleControlbar">
					<view class="player-tool" :style="{bottom:(showControlbar?'0':'-60rpx')}">
						<view class="tools">
							<view class="full-screen" @tap.stop="handleFullScreen1()">
								<u-icon name="scan" color="#ffffff" size="70" v-if="!fullScreenFlag1"></u-icon>
								<!-- <text class="iconfont" v-if="!fullScreenFlag">&#xe824;</text> -->
								<u-icon name="scan" color="#ffffff" size="70" v-else></u-icon>
								<!-- <text class="iconfont" v-else>&#xe67e;</text> -->
							</view>
							<view class="cruise" @tap.stop="handleCruise()" v-if="streamIndex == 2">
								<u-icon name="scan" color="#ffffff" size="70"></u-icon>
								<!-- <text class="iconfont">&#xe625;</text> -->
							</view>
						</view>
					</view>
				</live-player>
				<!-- #endif -->
			</view>
		</u-card>

		<u-card :title="title2" :box-shadow="ying" class="bian">
			<view slot="body">
				<!-- #ifdef MP-WEIXIN -->
				<live-player id="livePlayer2" class="live-player" catchtouchmove :src="sourceUrl2" autoplay background-mute
				 sound-mode="speaker" mode='RTC' @statechange="statechange" @click="handleControlbar">
					<view class="player-tool" :style="{bottom:(showControlbar?'0':'-60rpx')}">
						<view class="tools">
							<view class="full-screen" @tap.stop="handleFullScreen2()">
								<u-icon name="scan" color="#ffffff" size="70" v-if="!fullScreenFlag2"></u-icon>
								<!-- <text class="iconfont" v-if="!fullScreenFlag">&#xe824;</text> -->
								<u-icon name="scan" color="#ffffff" size="70" v-else></u-icon>
								<!-- <text class="iconfont" v-else>&#xe67e;</text> -->
							</view>
							<view class="cruise" @tap.stop="handleCruise()" v-if="streamIndex == 2">
								<u-icon name="scan" color="#ffffff" size="70"></u-icon>
								<!-- <text class="iconfont">&#xe625;</text> -->
							</view>
						</view>
					</view>
				</live-player>
				<!-- #endif -->
			</view>
		</u-card>

		<u-card :title="title3" :box-shadow="ying" class="bian">
			<view slot="body">
				<!-- #ifdef MP-WEIXIN -->
				<live-player id="livePlayer3" class="live-player" catchtouchmove :src="sourceUrl3" autoplay background-mute
				 sound-mode="speaker" mode='RTC' @statechange="statechange" @click="handleControlbar">
					<view class="player-tool" :style="{bottom:(showControlbar?'0':'-60rpx')}">
						<view class="tools">
							<view class="full-screen" @tap.stop="handleFullScreen3()">
								<u-icon name="scan" color="#ffffff" size="70" v-if="!fullScreenFlag3"></u-icon>
								<!-- <text class="iconfont" v-if="!fullScreenFlag">&#xe824;</text> -->
								<u-icon name="scan" color="#ffffff" size="70" v-else></u-icon>
								<!-- <text class="iconfont" v-else>&#xe67e;</text> -->
							</view>
							<view class="cruise" @tap.stop="handleCruise()" v-if="streamIndex == 2">
								<u-icon name="scan" color="#ffffff" size="70"></u-icon>
								<!-- <text class="iconfont">&#xe625;</text> -->
							</view>
						</view>
					</view>
				</live-player>
				<!-- #endif -->
			</view>
		</u-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				livePage:'',
				isPlaySource: false, //是否有播放源
				isVideoLive: false, //是否是直播
				isAutoplay: true, //是否自动播放
				videoMsg: '', //video消息
				sourceUrl1: 'rtmp://140.246.85.169:1935/stream/hsj', //播放路径
				sourceUrl2: 'rtmp://140.246.85.169:1935/stream/hwt', //播放路径
				sourceUrl3: 'rtmp://140.246.85.169:1935/stream/ryp', //播放路径
				showControlbar: true,
				timer: null,

				title1: "红石涧",
				title2: "回望台",
				title3: "日月坪",
				ying: "0 0 10px #ccbfb5"
			}
		},
		watch: {
			showControlbar(val, oldVal) {
				if (val) {
					this.timer = setTimeout(() => {
						this.showControlbar = false
					}, 5000)
				} else {
					clearTimeout(this.timer);
				}
			}
		},
		//当页面加载时
		onLoad() {
			var cache = uni.getStorageSync('USER_INFO')
			console.log(cache)
			if (cache) {
				console.log("已经存在缓存")
				this.decide = true
			} else {
				console.log("没有拿到缓存,需要登录")
				uni.reLaunch({
					url: '../self/self'
				})
			}
			// #ifdef MP-WEIXIN
			this.playerCtx1 = uni.createLivePlayerContext('livePlayer1');
			// #endif
			// #ifdef MP-WEIXIN
			this.playerCtx2 = uni.createLivePlayerContext('livePlayer2');
			// #endif
			// #ifdef MP-WEIXIN
			this.playerCtx3 = uni.createLivePlayerContext('livePlayer3');
			// #endif
		},
		created() {
			// #ifdef  MP-WEIXIN
			this.getLiveList() //视频流列表
			//自定义控制栏自动隐藏的实现
			setTimeout(() => {
				this.showControlbar = false
			}, 10000)
			// #endif
		},
		methods: {
			quanping(e) {
				console.log("说好的全屏呢", e)
			},
			statechange(e) {
				console.log('live-player code:', e.detail.code)
			},
			error(e) {
				console.error('live-player error:', e.detail.errMsg)
			},


			//
			handleControlbar() {
				this.showControlbar = !this.showControlbar
			},
			getLiveList() {
				// this.$api.livePage.getLiveList().then(res => {
				// 	//业务逻辑
				// }).catch(err => {
				// 	console.log('err');
				// });
			},
			// 巡航
			handleCruise() {
				// #ifdef  MP-WEIXIN
				uni.vibrateShort();
				// #endif
			},
			//全屏功能的实现
			handleFullScreen1() {
				var that = this
				if (!that.fullScreenFlag1) {
					//全屏
					that.playerCtx1.requestFullScreen({
						success: res => {
							that.fullScreenFlag1 = true
							console.log('我要执行了');
						},
						fail: res => {
							console.log('fullscreen fail,第一台');
						},
						direction: 90
					});
				} else {
					//缩小
					that.playerCtx1.exitFullScreen({
						success: res => {
							that.fullScreenFlag1 = false
							console.log('我要执行了');
						},
						fail: res => {
							console.log('exit fullscreen success ,第一台');
						}
					});
				}
			},
			
			//第二个
			//全屏功能的实现
			handleFullScreen2() {
				
				var that = this
				if (!that.fullScreenFlag2) {
					//全屏
					that.playerCtx2.requestFullScreen({
						success: res => {
							that.fullScreenFlag2 = true
							console.log('我要执行了,第二台');
						},
						fail: res => {
							console.log('fullscreen fail,第二台');
						},
						direction: 90
					});
				} else {
					//缩小
					that.playerCtx2.exitFullScreen({
						success: res => {
							that.fullScreenFlag2 = false
							console.log('我要执行了,第二台');
						},
						fail: res => {
							console.log('exit fullscreen success,第二台');
						}
					});
				}
			},
			
			//第三个
			handleFullScreen3() {
				
				var that = this
				if (!that.fullScreenFlag3) {
					//全屏
					that.playerCtx3.requestFullScreen({
						success: res => {
							that.fullScreenFlag3 = true
							console.log('我要执行了');
						},
						fail: res => {
							console.log('fullscreen fail,第三台');
						},
						direction: 90
					});
				} else {
					//缩小
					that.playerCtx3.exitFullScreen({
						success: res => {
							that.fullScreenFlag3 = false
							console.log('我要执行了');
						},
						fail: res => {
							console.log('exit fullscreen success,第三台');
						}
					});
				}
			},
		}
	}
</script>


<style lang="scss" scoped>
	.bian {}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.player-content {
			position: relative;
			width: 100%;
			height: 450rpx;
			display: flex;
			background-size: 100% 100%;

			.live-player {
				width: 100%;
				height: 100%;
				position: relative;
			}
		}
	}

	//播放器弹出工具
	.player-tool {
		width: 100%;
		height: 60rpx;
		background-image: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		left: 0;
		padding: 0 45rpx;
		transition: all 0.3s;

		.tools {
			height: 100%;
			width: auto;
			display: flex;
			align-items: center;

			.full-screen {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.iconfont {
					color: #fff;
					font-weight: bold;

				}
			}

			.cruise {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 25rpx;

				.iconfont {
					color: #E45A3E;
					font-size: 45rpx;
				}
			}
		}

	}
</style>
